<template>
  <div class="user-wrap">
    <div class="left">
      <div class="img-wrap"
           w-120-120
           aspectratio>
        <img :src="userInfo.avatar"
             alt=""
             aspectratio-content>
      </div>
    </div>
    <div class="right">
      <div class="user-name">{{userInfo.userName}}</div>
      <div class="phone">{{userInfo.phone}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UserInfo',
  props: {
    userInfo: {
      type: Object
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.user-wrap
  width 100%
  padding-left 24px
  padding-right 24px
  box-sizing border-box
  display flex
  margin-bottom 88px
  padding-top 98px
  box-sizing border-box

  .left
    width 120px
    height 120px
    border-radius 50%
    margin-right 28px

    .img-wrap
      border-radius 50%

  .right
    flex 1
    min-width 0
    padding-top 22px
    box-sizing border-box

    .user-name
      font-size $shop_name
      font-weight 500
      color $common_fz_color
      line-height 54px
      ellipsis()

    .phone
      font-size $common_fz
      font-weight 400
      color $location
      line-height 46px
      ellipsis()
</style>
